<template>
  <div class="">
    <!-- 顶部固定展示 -->
    <div class="moneytop">
      <div class="leftmoney">
        <div class="leftimg">
          <div class="marg">
            K币：<span class="f26">{{this.$store.state.userdata.kb_count}}</span> 个<span class="f36">/</span>零钱：<span class="f16">{{this.$store.state.userdata.money}}</span> 元
            <i class="myhelp"></i>
          </div>
        </div>
      </div>
      <div class="righttext">
        <div class="buttontext">
          <p>
            hello~{{ this.$store.state.kgcUser.nickname }}，欢迎来到我的钱包
          </p>
          <p class="buttonclass">
            <button v-if="showKb" class="kbcz" @click="showPayLoad">K币充值</button>
            <button v-else class="kbcz" @click="showKbRecord">查看记录</button>
            <button>零钱提现</button>
          </p>
        </div>
      </div>
    </div>
    <div class="money-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showKb: true
    }
  },
  methods: {
    showPayLoad(){
      this.showKb = false
      this.$router.push('/home/moneyZfb')
    },
    showKbRecord(){
      this.showKb = true
      this.$router.push('/home/moneyRec')
    }
  }
}
</script>

<style lang="less" scoped>
.buttontext {
  margin: 30px 0 20px 20px;
  font-weight: 700;
}


.buttontext .buttonclass {
  margin-top: 24px;
  button {
    cursor: pointer;
    border: none;
    outline: none;
    width: 120px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-weight: 700;
    margin-right: 3px;
    color: #fff;
    font-size: 16px;
  }
}

.kbcz {
  background: #096;
}

.marg .myhelp {
  width: 15px;
  height: 17px;
  display: inline-block;
  position: relative;
  right: -5px;
  top: -15px;
  cursor: pointer;
}

.myhelp {
  background: url(http://192.168.208.3/images/sucai/help_03.jpg) no-repeat;
}

.moneytop {
  height: 120px;
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  color: #5a5a5a;
}

.leftmoney {
  width: 358px;
  background: #019966;
  height: 100%;
  display: flex;
}

.marg {
  padding-top: 40px;
  font-size: 14px;
  color: #ffffff;
}

.leftimg {
  height: 120px;
  width: 288px;
  padding-left: 70px;
  background: url(http://192.168.208.3/images/sucai/qnd_rt_bg.png) 20px 50px
    no-repeat #019966;
}

.f36 {
  font-size: 36px;
}
.f20 {
  font-size: 20px;
}
.f26 {
  font-size: 26px;
}

.f16 {
  font-size: 16px;
}
</style>
